<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            font-family: Microsoft YaHei, Helvetica Neue, Helvetica, STHeiTi, Arial, sans-serif;
            font-size: 12px;
        }
        #c1{
            background-color: #4f8dfe;
            min-width: 1200px;
            height: 70px;
            margin: 0 auto;
            overflow: hidden;
        }
        #d1{
            margin-top: 15px;
            float: left;
        }
        #d2>ul{
            list-style-type: none;
            overflow: hidden;
            margin: 24px 0 0 50px;
        }
        #d2>ul>li>a{
            float: left;
            padding: 0 20px;
            color: #fff;
            font-size: 16px;
            text-decoration: none;
        }

        #d3>ul{
            list-style-type: none;
            margin: -10px 10px 0 0;
        }
        #d3 li{
            float: right;
            color: #fff;
        }
        #d3>ul>li>a{
            color: #fff;
            font-size: 14px;
            text-decoration: none;
        }



        #c2{
            width: 1220px;
            height: 223px;
            background-color: #e8e8e8;
            margin: 0 auto;
        }
        #c2 ul{
            list-style-type: none;
            padding: 0;
        }
        #c2 li{
            width: 224px;
            height: 223px;
            margin: 0 10px;
            background-color: white;
            float: left;
            border-radius: 5px;
            overflow: hidden;
        }
        #c2 li:hover{
            position: relative;
            bottom: 5px;
            box-shadow: 0 0 8px 3px red;
        }
        .t_div img{
            width: 100%;
        }
        .b_div{
            padding: 15px;
        }
        h4{
            margin: 0 0 12px 0;
        }
        h4>a{
            color: black;
            font-weight: normal;
            text-decoration: none;
            font-size: 14px;
        }
        .s1{
            color: #4f8dfe;
        }
        .s2{
            color: #8888;
            float: right;
        }


        .state{
            display: block;
            background-image: url("https://cdn.tmooc.cn/tmooc-web/css/img/state-free.png");
            width: 44px;
            height: 44px;
            position: absolute;
            top: 0;
        }
        .t_div{
            position: relative;
        }
    </style>
</head>
<body>
<div>
    <div id="c1">
        <div id="d1">
            <a href="https://www.tmooc.cn/">
                <img src="https://cdn.tmooc.cn/tmooc-web/css/img/tmooc-logo.png" alt="">
            </a>
        </div>
        <div id="d2">
            <ul>
                <li><a href="https://www.tmooc.cn/">首页</a></li>
                <li><a href="https://www.tmooc.cn/free/">免费课</a></li>
                <li><a href="https://www.tmooc.cn/live/">直播课</a></li>
                <li><a href="https://www.tmooc.cn/advanced/">精品课</a></li>
                <li><a href="https://www.tmooc.cn/ttspages/online-class/web/TMOOC/index.shtml">线上班</a></li>
                <li><a href="https://www.tmooc.cn/offline_courses/">线下班</a></li>
                <li><a href="https://www.tmooc.cn/university/index.html">高校专区</a></li>
            </ul>
        </div>
        <div id="d3">
            <ul>
                <li><a href="https://uc.tmooc.cn/login/jumpToRegister">注册</a></li>
                <li>|</li>
                <li><a href="https://www.tmooc.cn/#">登录</a></li>
            </ul>
        </div>
   </div>

    <div>
        <div></div>
        <div></div>
    </div>



    <div id="c2">
        <ul>
            <li>
                <div class="t_div">
                    <a href="">
                        <img src="https://cdn.tmooc.cn/bsfile//courseImg///b1ccab31a57b44478adbe1b30de6b69e.jpg" alt="">
                        <i class="state"></i>
                    </a>
                </div>
                <div class="b_div">
                    <h4>
                        <a href="">Java总监咨询日-如何才能学好Java</a>
                    </h4>
                    <div>
                        <span class="s1">免费</span>
                        <span class="s2">466人报名</span>
                    </div>
                </div>
            </li>
            <li>
                <div class="t_div">
                    <a href="">
                        <img src="https://cdn.tmooc.cn/bsfile//courseImg///65de17b2b6cd418091873cb914092b5b.jpg" alt="">
                        <i class="state"></i>
                    </a>
                </div>
                <div class="b_div">
                    <h4>
                        <a href="">软件测试总监咨询日-自动化测试&测试开发必备技能</a>
                    </h4>
                    <div>
                        <span class="s1">免费</span>
                        <span class="s2">264人报名</span>
                    </div>
                </div>
            </li>
            <li>
                <div class="t_div">
                    <a href="">
                        <img src="https://cdn.tmooc.cn/bsfile//courseImg///e2a318438dcd41e99892e73bf151e8af.jpg" alt="">
                        <i class="state"></i>
                    </a>
                </div>
                <div class="b_div">
                    <h4>
                        <a href="">【职达】360-设计师岗位的三十六计</a>
                    </h4>
                    <div>
                        <span class="s1">免费</span>
                        <span class="s2">2425人报名</span>
                    </div>
                </div>
            </li>
            <li>
                <div class="t_div">
                    <a href="">
                        <img src="https://cdn.tmooc.cn/bsfile//courseImg///1b430a2b47c448c9ad27d8da91b30891.jpg" alt="">
                        <i class="state"></i>
                    </a>
                </div>
                <div class="b_div">
                    <h4>
                        <a href="">【职达】快手！设计师打怪升级攻略</a>
                    </h4>
                    <div>
                        <span class="s1">免费</span>
                        <span class="s2">2462人报名</span>
                    </div>
                </div>
            </li>
            <li>
                <div class="t_div">
                    <a href="">
                        <img src="https://cdn.tmooc.cn/bsfile//courseImg///d4167e5378ba4ae9873ab291ba4fdf55.jpg" alt="">
                        <i class="state"></i>
                    </a>
                </div>
                <div class="b_div">
                    <h4>
                        <a href="">职达【阿里】-技术岗面试攻略</a>
                    </h4>
                    <div>
                        <span class="s1">免费</span>
                        <span class="s2">3155人报名</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>>
</div>
</body>
</html>